<!-- 下拉列表 -->
<template lang="pug">
div(ref="head")
  g-h.head(
      j-c="space-between"
      a-i="center"
      :class="{disabled: disabled}"
      :style="rootStyle"
      @click.native="click"
      )
    div.head-title {{ curValueLocal }}
    icon-triangle.icon(direction="down" fill="#212121" width="12")
  div.list(v-show="showDropDown" :style="{top: listTop}")
    div.item(
        v-for="(item, i) in list"
        :key="i"
        :style="selectedStyle(item)"
        @click="select(item)"
        ) {{ item.name }}

</template>

<script>
/*
  可以参考/root/entry-recognition/a.vue里的用法

  这是我自己实现的下拉，写得不好，用起来有些麻烦

  注意:
    每一个下拉都要加一个zIndex，比如
      :style="{zIndex: 30}"
    下面的下拉的zIndex要比上面的下拉的zIndex小
*/

/*
  事件
    select     选择一项
*/

export default {
  name: "DropDownList",
  props: {
    /* 
      下拉列表数据
      [
        {
          name: "",
          id: "",
        }
      ]
   */
    list: {
      type: Array,
      default: () => [],
    },

    // 当前选择的值
    curValue: {
      type: String,
      default: "",
    },

    // 未选择值时显示的文字
    emptyText: {
      type: String,
      default: "请选择",
    },

    // 是否禁用
    forbid: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    let curValueId = ""
    for (let item of this.list) {
      if (item.name === this.curValue) {
        curValueId = item.id
        break
      }
    }

    return {
      showDropDown: false,
      listTop: "0px",

      curValueId,
    }
  },
  computed: {
    curValueLocal() {
      if (this.curValue === "") {
        return this.emptyText
      }
      return this.curValue
    },

    rootStyle() {
      let a = {}
      if (this.showDropDown) {
        a.borderColor="#64B5F6"
      }
      return a
    },
    disabled() {
      if (this.forbid) {
        return true
      }
      if (this.list && this.list.length) {
        return false
      }
      return true
    },
  },
  /* watch: {
    list(newValue) {
      if (newValue && newValue.length > 0) {
        this.curValueLocal = newValue[0].name
      }
    },
  }, */

  methods: {
    click() {
      if (!this.disabled) {
        this.showDropDown = !this.showDropDown
      }
    },

    select(item) {
      this.showDropDown = false
      this.curValueId = item.id
      if (this.curValueLocal !== item.name) {
        this.$emit("select", {
          v: item.id,
          vTitle: item.name,
        })
      }
    },

    selectedStyle(item) {
      if (item.id === this.curValueId) {
        return {
          background: "#9E9E9E"
        }
      } else {
        return {}
      }
    },
  },

  /* created() {
    if (this.list && this.list.length > 0) {
      this.curValueLocal = this.list[0].name
    }
  }, */
  updated() {
    // can't use mounted() here
    // because sometimes when this is mounted, it is not shown
    if (this.listTop === "0px") {
      let head = this.$refs.head.getBoundingClientRect()
      this.listTop = `${head.height}px`
    }
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  position: relative

.disabled
  background: grey200
  color: grey500

.head
  position: sticky
  position: -webkit-sticky
  top: 0
  background: white
  border: 1px solid grey400
  &-title
    padding: 0 0.3rem
    text-align: center
    white-space: nowrap
    overflow-x: scroll
    &::-webkit-scrollbar
      display: none
    // text-ellipsis()

.list
  position: absolute
  width: 100%
  // max-height: 20rem
  max-height: 10rem
  background: white
  border-right: 1px solid blue300
  border-bottom: 1px solid blue300
  border-left: 1px solid blue300
  overflow: scroll
  // &::-webkit-scrollbar
    // display: none

.item
  padding: 0.3rem
  width: 100%
  white-space: nowrap

</style>
